<template>
    <view>
        <view class="tbody-list-item" v-for="(item,index) in articleList" :key="index" @click.stop="addDetails(item.id)">
            <!--                    单个内容头部-->
            <view class="list-item-head-c">
                <view class="item-head-portrait-a" @click.stop="addPersonCenter(item.user_id,item.no_name)">
                    <img :src="item.photo_url" v-if="item.photo_url.length>0" />
                </view>
                <view class="item-head-name" @click.stop="addPersonCenter(item.user_id,item.no_name)">
                    <view class="name">
                        <p>{{item.user_name}}</p>
                        <img v-if="levelShow&&item.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'"/>
                    </view>
                    <text>{{item.publish_time}}</text>
                </view>
<!--                <view class="item-option" @click.stop="onDelPost(item,index)">-->
<!--                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/delbtn.png" />-->
<!--                </view>-->
            </view>
            <!--                    end-->

            <view class="item-content-a">
				<view v-if="item.content.length > 0" @click.stop>
					<u-parse class="content-text-a ssss" :content="item.content" @preview="preview" @navigate.stop="navigate"/>
				</view>
                <view class="content-img-c" v-if="item.img_url_array.length == 1">
                    <img @load="contentImgLoad" :id="index" :class="imgShow[index]" v-for="(imgUrl,key) in item.img_url_array" :key="key" :src="imgUrl" @click.stop="showPic(imgUrl,index)" mode="aspectFill"/>
                </view>
                <view class="content-img-b" v-if="item.img_url_array.length !=4 &&item.img_url_array.length!=1">
					<img v-for="(imgUrl,key) in item.img_url_array" :key="key" :src="imgUrl" @click.stop="showPic(imgUrl,index)" mode="aspectFill"/>
				</view>
				<view class="content-img-f" v-if="item.img_url_array.length ==4">
					<view v-for="(imgUrl,key) in item.img_url_array" :key="key">
						<img  :src="imgUrl" @click.stop="showPic(imgUrl,index)" mode="aspectFill"/>
					</view>
				</view>
                <view :class="item.video_info.video_status=='heng'?'content-video-b':'content-video-a'" v-if="item.video_info.length != 0">
                    <img v-if="!videoPlay[index]" :id="index" :src="item.video_info.video_poster_img_url" @load="loadVideo" @click.stop mode="aspectFill" />
                    <img class="play" v-if="!videoPlay[index]" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/video-play.png" @click.stop="onVideoplay(index)"  />
                    <video v-if="videoPlay[index]" autoplay="true" @ended="videoEnd" :id="index" show-mute-btn="true" enable-progress-gesture="false" enable-play-gesture="true" :src="item.video_info.video_url" @click.stop></video>
                </view>
            </view>
			
			<!-- 投票贴 -->
			<!-- <view class="item-content-a ">
				<view v-if="item.content.length> 0" class="vote-wrapper" @click.stop>
					
					<u-parse class="content-text-a" :content="item.content" @preview="preview" @navigate.stop="navigate"/>
				</view>
			</view> -->
			<!-- 投票贴end -->
            <!--                    单个内容底部-->
            <view class="item-footer">
                <view class="content-label-a" v-if="isLabel">
                    <!--                    <view>{{item.classify_name}}</view>-->
                    <view @click.stop="skipCircleHome(item.circle_id)"><img src="/static/img/biaoqian-img.png" /><text>{{item.circle_name}}</text></view>
                </view>
                <view class="list-item-footer">
                    <view class="list-item-left">
                        <view @click.stop="setInteractive(2,item.id,index)"><img src="/static/img/zhuanfa.png">分享</view>
                        <view ><img src="/static/img/huifu.png">{{item.comment_number}}</view>
                        <view @click.stop="setInteractive(0,item.id,index)"><img src="/static/img/appreciate_up.png" v-if="item.already_good!=1"><img src="/static/img/appreciate_up-active.png" v-if="item.already_good==1">{{item.good_number}}</view>
                    </view>
                    <view class="list-item-right" @click.stop="onDelPost(item,index)">
<!--                        <view @click.stop="setInteractive(0,item.id,index)"><img src="/static/img/appreciate_up.png" v-if="item.already_good!=1"><img src="/static/img/appreciate_up-active.png" v-if="item.already_good==1">{{item.good_number}}</view>-->
<!--                        <view @click.stop="setInteractive(1,item.id,index)"><img src="/static/img/appreciate_down.png" v-if="item.already_not_good!=1"><img src="/static/img/appreciate_down-active.png" v-if="item.already_not_good==1">{{item.not_good_number}}</view>-->
                        <view class="item-option">
                            <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/delbtn.png" />
                        </view>
                    </view>
                </view>
            </view>

            <!--                    end-->
        </view>
        <!--        弹窗-->

        <Dislike :fatherValue.sync="popupShow" :articleItem.sync="articleItem" :isOwners.sync="isOwners" :isAdmin.sync="isAdmin"></Dislike>
        <!--        end-->
    </view>

</template>

<script>
    import Dislike from "../../components/popup/dislike";
	import uParse from '@/components/gaoyia-parse/parse.vue'
    export default {
        name: "invitation",
        components: {Dislike,uParse},
        props:{
            Article:{
                required: true
            },
			isAdmin:{//区分普通用户还是管理员按钮
                required: true,
				default:false,
				type:Boolean
			},
			isOwner:{//判断是否时用户本身的帖子
                required: true,
				default:false,
				type:Boolean
			},
            levelShow:{
                default: true,
                required: true
            },
            isLabel:{
                default: true,
                required: true
            },
            nowNum:{
                required: true
            },
            nowSite:{
                required: true
            },
            show:{
                required: true
            }
        },
        data(){
            return{
                articleList : this.Article,
                popupShow: false,
                articleItem:{},
                imgShow: [],
                videoSite:[],
                videoPlay:[],
                number:0,
                isOwners: this.isOwner,
                touchstart: 0,
            }
        },
        onReady(){
            // this.videoContext = uni.createVideoContext(this.name+'0');
            // this.videoContext.play();
            // for (let i = 0;i<this.Article.length;i++){
            //     if (this.Article[i].video_url_array.length>0) {
            //         if (i==0){
            //             this.videoPlay[i] = true;
            //         } else {
            //             this.videoPlay[i] = false
            //         }
            //     }
            // }
            // uni.pageScrollTo({
            //     scrollTop: this.nowSite,
            //     duration: 0
            // })

            console.log(this.nowSite)
            console.log('aa')
            // for (let i = 0;i< this.videoSite.length;i++){
            //     console.log('ss')
            //     if (this.videoSite[i]){
            //         let number = this.videoSite[i].top - this.nowSite;
            //         if (number<200&&number>0) {
            //             this.videoPlay[i] = true;
            //         }else {
            //             this.videoPlay[i] = false;
            //         }
            //     }
            // }
            // let str = this.videoPlay;
            // this.videoPlay = [];
            // this.videoPlay = str;
            // console.log(this.videoPlay)
            //进入全屏状态
            // this.videoContext.requestFullScreen();
        },
        onHide(){
          console.log('ss')
        },
        // //小程序监听页面滚动
        // onPageScroll(e){
        // 	console.log(e)
        // },
        methods:{
            handletouchstart(e){
                this.touchstart = e.changedTouches[0].pageY;
            },
            handletouchend(e){
                let number = this.touchstart - e.changedTouches[0].pageY;
                if (number < 1&& number>0){
                    console.log('单击操作')
                }else {
                    this.nowSite += number;
                }
                if (this.nowSite<0){
                    this.nowSite = 0;
                }
            },
            onVideoplay(id){
                for (let i = 0;i<this.videoPlay.length;i++){
                    if (i==id){
                        this.videoPlay[i] = true;
                    } else {
                        this.videoPlay[i] = false;
                    }
                }
                let str = this.videoPlay;
                this.videoPlay = [];
                this.videoPlay = str;
            },
            loadVideo(e){
                console.log(e)
                console.log(e.currentTarget.id,"aa")
                console.log(e.currentTarget.offsetTop - getApp().globalData.navStyle.navigationbarHeight,"bb")
                this.videoSite[e.currentTarget.id] = e.currentTarget.offsetTop - getApp().globalData.navStyle.navigationbarHeight;
                if (this.show){
                    // let number = this.videoSite[e.currentTarget.id] - this.nowSite;
                    // if (number<200&&number>0) {
                    //     this.videoPlay[e.currentTarget.id] = true;
                    // }else{
                    //     this.videoPlay[e.currentTarget.id] = false;
                    // }
                    this.videoPlay[e.currentTarget.id] = false;
                    let str = this.videoPlay;
                    this.videoPlay = [];
                    this.videoPlay = str;
                }
            },
            videoEnd(e){
                // this.videoPlay[e.currentTarget.id] = false;
                // let str = this.videoPlay;
                // this.videoPlay = [];
                // this.videoPlay = str;
            },
            contentImgLoad(e){
                if (e.detail.width == e.detail.height){
                    this.imgShow[e.currentTarget.id] = 'deng';
                } else if (e.detail.width > e.detail.height) {
                    this.imgShow[e.currentTarget.id] = 'width-height';
                }else {
                    this.imgShow[e.currentTarget.id] = 'height-width';
                }
                let str = this.imgShow;
                this.imgShow = [];
                this.imgShow = str;
            },
            // 预览图片
            showPic(url,index){
                uni.previewImage({
                    indicator:"none",
                    current:url,
                    urls: this.articleList[index].img_url_array
                });
            },
            //跳转到圈子首页
            skipCircleHome(id){
                uni.navigateTo({
                    url: "/pages/circlebar/circlebarhome/circlebarhome?circle_id="+id
                })
            },
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			  uni.navigateTo({
			  	url:href
			  })
			},
            //点击删除弹窗
            onDelPost(item,index){
                this.articleItem = {
                    data: item,
                    index: index
                };
                if (parseInt(item.user_id)==uni.getStorageSync('userId')){
                    this.isOwners = true
                }else {
                    this.isOwners = false
                }
                this.popupShow = true;
                console.log(this.articleItem)
                console.log(this.isOwners,this.isAdmin)
            },
            //删除当前显示帖子
            delPostItem(id){
                let str = this.articleList;
                str.splice(id,1);
                this.articleList = [];
                this.articleList = str;
            },
            //新增帖子互动记录
            async setInteractive(type,articleID,index){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    post_article_id : articleID,
                    action_type: type
                }
                const res = await this.$api.setInteractive(params);
                if (res.data.level == 'success'){
                    if(type!=2){
                    	uni.showToast({
                    	    icon:'none',
                    	    title:res.data.message
                    	})
                    }
                    switch (type) {
                        case 0:
                            this.articleList[index].good_number++;
                            this.articleList[index].already_good=1;
                            if (this.articleList[index].already_not_good == 1){
                                this.articleList[index].already_not_good=0;
                                this.articleList[index].not_good_number--;
                            }
                            break;
                        case 1:
                            this.articleList[index].not_good_number++;
                            this.articleList[index].already_not_good=1;
                            if (this.articleList[index].already_good == 1){
                                this.articleList[index].already_good=0;
                                this.articleList[index].good_number--;
                            }
                            break;
                        case 2:
                            this.articleList[index].share_number++;
							uni.navigateTo({
								url:`/pages/sharePost/sharePost?post_article_id=${articleID}`
							})
                            break;
                    }
                } else {
                    
                    switch (type) {
                        case 0:
                            this.articleList[index].good_number--;
                            this.articleList[index].already_good=0;
                            break;
                        case 1:
                            this.articleList[index].not_good_number--;
                            this.articleList[index].already_not_good=0;
                            break;
                        case 2:
                            this.articleList[index].share_number--;
							uni.navigateTo({
								url:`/pages/sharePost/sharePost?post_article_id=${articleID}`
							})
                            break;
                    }
                }
            },
            //跳转帖子详情页面
            addDetails(id){
				let levelShow=1
				if(this.levelShow==false){
					levelShow=2
				}
				
                uni.navigateTo({
                    url: "/pages/Details/postdetails?post_article_id="+id+'&levelShow='+levelShow
                })
            },
            //跳转到个人主页
            addPersonCenter(userID,noName=0){
				if(parseInt(userID)==uni.getStorageSync('userId')){
					//本人发的帖子
					uni.navigateTo({
					    url: "/pages/person/customHomepage/customHomepage?userId="+userID
					})
					return
				}
				if(parseInt(noName)==1){
					//匿名
					return
				}
                uni.navigateTo({
                    url: "/pages/person/customHomepage/customHomepage?userId="+userID
                })
            },
        },
        watch:{
            articleList(newValue, oldValue){
                this.$emit('updata:Article',newValue);
                // console.log('bb')
            },
            Article(newValue){
                this.articleList = newValue;
                for (let i = 0;i<newValue.length;i++){
                    if (newValue[i].video_url_array.length>0) {
                        this.videoPlay[i] = false
                    }
                }
                // console.log(this.name,'aa')
                // if (newValue[0].video_url_array.length>0){
                //     let na = this.name + '0';
                //     console.log(na)
                //     this.videoContexts = uni.createVideoContext('popular0')
                //     this.videoContext.play();
                // }
            },
            popupShow(newValue, oldValue){
                if (newValue == false){
                    this.$parent.onWXshow();
                }
            },
            nowSite(newValue){
                for (let i = 0;i< this.videoSite.length;i++){
                    if (this.videoSite[i]){
                        let number = this.videoSite[i]- newValue;
                        if (number<200&&number>0) {
                            this.videoPlay[i] = true;
                        }else {
                            this.videoPlay[i] = false;
                        }
                    }
                }
                let str = this.videoPlay;
                this.videoPlay = [];
                this.videoPlay = str;
            },
            nowNum(newValue){
                console.log(newValue)
                console.log(this.videoSite)
                if (this.show){
                    for (let i = 0;i< this.videoSite.length;i++){
                        let number = this.videoSite[i] - this.nowSite;
                        if (number<200&&number>0) {
                            this.videoPlay[i] = true;
                        }else{
                            this.videoPlay[i] = false;
                        }
                    }

                    let str = this.videoPlay;
                    this.videoPlay = [];
                    this.videoPlay = str;
                }else {
                    for (let n = 0;n< this.videoSite.length;n++){
                        if (this.videoSite[n]){
                            this.videoPlay[n] = false;
                        }
                    }
                    let str = this.videoPlay;
                    this.videoPlay = [];
                    this.videoPlay = str;
                }

                console.log(this.videoPlay)
            }
        }
    }
</script>

<style scoped lang="scss">
    .tbody-list-item{
        background: #ffffff;
        margin-bottom: 20rpx;
    }
    .ssss{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
	// .vote-wrapper{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	align-content: center;
	// 	.vote-icon{
	// 		width: 40rpx;
	// 		height: 40rpx;
	// 	}
	// 	.label{
	// 		color:#128FFF;
	// 		font-weight: 600;
	// 	}
	// }
</style>